<template>
    <div class="main">
        <section>
            <div class="btn-block">
                <el-button type="success" size="small" icon="el-icon-circle-plus" plain @click="showAdd">增加</el-button>
                <el-button type="primary" size="small" plain @click="$router.push({name: 'upgradeMakeMoneyList'})">返回</el-button>
            </div>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="ID" prop="id" width="160" show-overflow-tooltip></el-table-column>
                <!--<el-table-column align="center" label="upgradeMakeMoneyId" prop="upgradeMakeMoneyId" min-width="100"></el-table-column>-->
                <el-table-column align="center" label="banner" min-width="100">
                    <template slot-scope="scope">
                        <img :src="scope.row.banner" height="50px"/>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="showEdit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog :title="formData.id ? '编辑' : '新建'" :visible.sync="showEditPop">
                <el-form :model="formData" :rules="formRule" size="medium" ref="form" label-width="100px">
                    <el-form-item label="banner:" prop="banner">
                        <el-upload
                                class="avatar-uploader"
                                accept="image/*"
                                :action="upladUrl"
                                name="file"
                                :show-file-list="false"
                                :on-success="uploadSuccess"
                                :before-upload="beforeUpload">
                            <img v-if="formData.banner" :src="formData.banner" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :loading="btnLoading" :disabled="btnDisabled">保存</el-button>
                    <el-button @click="showEditPop = false">取消</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>

<script>
    export default {
        name: 'upgradeMakeMoneyBannerList',
        props: {
            id: { default: '' }
        },
        data() {
            return {
                listQuery: {
                    id: this.id
                },
                listLoading: true,
                list: [],
                formData: {
                    upgradeMakeMoneyId: this.id,
                    banner: ''
                },
                formRule: {
                    banner: [
                        {required: true, message: '不能为空', trigger: 'change'}
                    ]
                },
                showEditPop: false,
                btnLoading: false,
                btnDisabled: false
            }
        },
        created() {
            this.getList();
        },
        methods: {
            // 获取列表
            getList() {
                this.listLoading = true;
                this.request({
                    url: '/bsnl-activity/upgradeMakeMoneyBanner/details',
                    method: 'get',
                    params: this.listQuery
                }).then(({data}) => {
                    this.list = data.upgradeMakeMoneyBannerList;
                    this.listLoading = false;
                }).catch(err => {
                    console.log(err);
                    this.list = [];
                    this.listLoading = false;
                });
            },
            uploadSuccess(res, file) {
                this.formData.banner = this.replaceImgUrl(res.filePath);
            },
            // 新建
            showAdd() {
                this.formData.banner = '';
                this.$nextTick(()=>{
                    this.$refs.form.clearValidate()
                });
                this.showEditPop = true;
                this.btnLoading = false;
            },
            // 编辑
            showEdit(row) {
                this.formData = Object.assign({}, row);
                this.$nextTick(()=>{
                    this.$refs.form.clearValidate()
                });
                this.showEditPop = true;
                this.btnLoading = false;
            },
            // 保存
            save() {
                this.$refs.form.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    let url = this.formData.id ? '/bsnl-activity/upgradeMakeMoneyBanner/update' : '/bsnl-activity/upgradeMakeMoneyBanner/create';
                    this.btnLoading = true;
                    this.request({
                        url,
                        method: 'post',
                        data: this.formData
                    }).then(() => {
                        this.btnLoading = false;
                        this.showEditPop = false;
                        this.$message.success('保存成功');
                        this.getList();
                    }).catch(err => {
                        this.btnLoading = false;
                    });
                });
            }
        }
    }
</script>
